import 'ol/ol.css'
import { Map, View } from 'ol'
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
import { Vector, WMTS, TileWMS, ImageWMS } from 'ol/source'
import Feature from 'ol/Feature'
import { Point, LineString } from 'ol/geom'
import { Stroke, Style, Circle, Fill } from 'ol/style'
import { get } from 'ol/proj'
import { getWidth, getTopLeft, getCenter } from 'ol/extent'
import WMTSTileGrid from 'ol/tilegrid/WMTS'
import TileGrid from 'ol/tilegrid/TileGrid'
// 线样式
const getLineStyle = () => {
  var style = new Style({
    stroke: new Stroke({
      color: '#FF0000',
      width: 1.5
    })
  })
  return style
}
const newLine = (path) => {
  const lineString = new LineString(path)
  const feature = new Feature({
    geometry: lineString
  })
  return feature
}
const newLineLayer = (path) => {
  const lineString = new LineString(path)
  const feature = new Feature({
    geometry: lineString
  })
  const vectorSource = new Vector({
    features: [feature]
  })
  const vectorLayer = new VectorLayer({
    source: vectorSource,
    style: getLineStyle()
  })
  return vectorLayer
}
const addLine = (path, vectorLayer) => {
  const lineString = new LineString(path)
  const feature = new Feature({
    geometry: lineString
  })
  const vectorSource = vectorLayer.getSource()
  vectorSource.addFeature(feature)
}
export { newLine, newLineLayer, addLine }
